<template>
    <div class="my-agency-detail">

        <a-spin tip="Loading..." :spinning="loading">
            <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                :label-col="{ style: { width: '150px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                <div class="form-panel yuan-form-col3">
                    <div class="form-panel-box">
                        <div class="form-title">机构信息</div>

                        <a-form-model-item class="yuan-form-item disable-form" label="机构名称" prop="name">
                            <a-input class="yuan-form-input" placeholder="机构名称" v-model="formData.name"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item disable-form" label="机构类型" prop="institutionalType">
                            <a-select class="yuan-form-input" v-model="formData.institutionalType" allowClear placeholder="机构类型">
                                <a-select-option value="中医馆">中医馆</a-select-option>
                                <a-select-option value="体检中心">体检中心</a-select-option>
                                <a-select-option value="社区医院">社区医院</a-select-option>
                                <a-select-option value="养老中心">养老中心</a-select-option>
                                <a-select-option value="口腔门诊">口腔门诊</a-select-option>
                            </a-select>
                        </a-form-model-item>

                        <a-form-model-item class="yuan-form-item disable-form" label="自营/加盟" prop="storeType">
                            <a-radio-group class="yuan-form-input" v-model="formData.storeType">
                                <a-radio value="ZY">自营</a-radio>
                                <a-radio value="JM">加盟</a-radio>
                            </a-radio-group>
                        </a-form-model-item>

                        <a-form-model-item class="yuan-form-item disable-form" label="医馆规模(人)" prop="hospitalScale">
                            <a-input class="yuan-form-input" type="number" placeholder="医馆规模"
                                v-model="formData.hospitalScale"></a-input>
                        </a-form-model-item>
                        <a-form-model-item label="营业执照" class="yuan-form-row" prop="businessLicense" v-if="pageReady">
                            <UploadVue :uploadLength="1" :onlyShow="true"
                                :defImgList="formData.businessLicense?[formData.businessLicense]:[]" />
                        </a-form-model-item>

                        <a-form-model-item label="医馆图片" class="yuan-form-row" prop="hospitalPicture" v-if="pageReady">
                            <UploadVue :uploadLength="6" :onlyShow="true"
                                :defImgList="(formData.hospitalPicture&&formData.hospitalPicture.length>0)?formData.hospitalPicture:[]" />
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-row disable-form" label="医馆特色" prop="hospitalFeature">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.hospitalFeature" placeholder="请输入医馆特色" :maxLength="500" />
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-row disable-form" label="医馆地址" prop="hospitalSite">
                            <a-input class="yuan-form-input" style="max-width:350px" placeholder="医馆地址"
                                v-model="formData.hospitalSite"></a-input>
                        </a-form-model-item>

                    </div>

                </div>
            </a-form-model>
            <div id="myMap"></div>
        </a-spin>

    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import { mapLoad } from "@/utils";
import platformApi from "@/api/platformApi";
let carWorkLogMap: any = null;
@Component({
    name: "tpl",
    components: { UploadVue },
})
export default class extends Vue {
    loading = false;
    pageReady = false;
    formData: any = {
        businessLicense: "",
        hospitalPicture: [],
    };

    async mounted() {
        await this.getPageInfo();
        this.mapInit();
    }

    beforeDestroy() {
        carWorkLogMap = null;
    }
    async getPageInfo() {
        this.loading = true;
        try {
            const res = await platformApi.findCurrentOrganization();
            this.formData = res.data;
            this.pageReady = true;
        } finally {
            this.loading = false;
        }
    }
    mapInit() {
        mapLoad(() => {
            if (carWorkLogMap) {
                carWorkLogMap.clearMap();
                carWorkLogMap.setZoom(11);
            } else {
                carWorkLogMap = new AMap.Map("myMap", {
                    zoom: 11,
                    center: [116.397428, 39.90923],
                });
            }

            if (this.formData.id && this.formData.siteCoordinate.latitude) {
                const location = [this.formData.siteCoordinate.longitude, this.formData.siteCoordinate.latitude]; // 格式："经度,纬度"

                let marker = new AMap.Marker({
                    map: carWorkLogMap,
                    position: location,
                });

                carWorkLogMap.setCenter(location);
                carWorkLogMap.setZoom(18);
                this.formData.addressCode = location.join(",");
            }
        });
    }

    uploadChangeCoverImageUrl(e) {
        this.formData.pictures = e.length ? e.map((item) => item.url) : [];
    }
}
</script>
<style lang="scss">
.my-agency-detail {
    padding: 20px;
    background-color: #fff;
    #myMap {
        width: 100%;
        height: 400px;
        margin-top: 20px;
    }
}
</style>
